<template>
  <div id="app">
    <div>
      <span>图书名称:</span>
      <input @blur="onKey" v-model.trim="title" type="text" />
    </div>
    <div>
      <button :disabled="edfg" @click="onKeyup" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>图书名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <nei-rong @del='del'  @modify='modify' :del1="del1" :arr="item" v-for="item in arr" :key="item.id"/>
      </table>
    </div>

  </div>
</template>
<script>
import NeiRong from './components/NeiRong.vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://liufusong.top:4000/'
export default {
  components: { NeiRong },
  data () {
    return {
      arr: [], // 获取数组
      title: '', // 自己填入的内容
      del1: false, // 数组剩一个的时候禁用删除按钮
      id: '', // 点击编辑 把收到的id 给他
      xz: true, // 这个是选择添加还是修改的,
      edfg: false
    }
  },

  created () {
    this.getGoods()// 刷新页面
  },

  methods: {
    // 获取商品列表
    async  getGoods () { // 解决异步 配套使用  async await
      try {
        const res = await axios({
          url: '/books '
        })
        this.arr = res.data
        console.log(res.data)
      } catch (err) { // 请求失败时返回
        alert('请求失败')
      }
    },
    async  del (e) { // 删除
      await axios({
        url: 'books/' + e,
        method: 'DELETE'
      })
      this.getGoods()
    },
    async  modify (e) { // 点击编辑时
      await axios({
        url: 'books/' + e,
        method: 'GET'
      }).then(res => {
        this.title = res.data.name // 把名字传入内容
        this.id = res.data.id // 把id 传入id
        this.xz = false// 把选择的改成false
      })
    },
    onKeyup () { // 添加或修改
      if (this.xz) { // true 为添加
        if (this.title === '') {
          return alert('请输入内容')
        }
        axios({
          url: 'books',
          method: 'POST',
          data: {
            name: this.title
          }
        }).then(res => {
          this.getGoods()
          this.title = ''
        })
      } else { // 反着为修改
        if (this.title === '') {
          return alert('请输入内容')
        }
        axios({
          url: 'books/' + this.id,
          method: 'PUT',
          data: {
            name: this.title
          }
        }).then(res => {
          this.getGoods()
          this.title = ''
          this.xz = true// 改回true
        })
      }
    },
    async  onKey () { // 判定是否有相同的 但要点击外部  要失去焦点
      const res = await axios({
        url: 'books/book/' + this.title
      })
      if (res.data.status === 1) {
        this.edfg = true
      } else {
        this.edfg = false
      }
    }
  },
  watch: {
    arr: {
      deep: true,
      handler (newVal) {
        if (newVal.length === 1) { // 监听是否剩一个
          this.del1 = true
        } else {
          this.del1 = false
        }
      }
    }
  }
}
</script>
